<template>
  <svg @contextmenu.stop.prevent="checkState">
    <g :transform="'translate(' + translateX + ',' + translateY + ')rotate('+ rotate +')'" class="cursor-pointer">
      <g>
        <template>
          <g >
          <g  v-if="shouCheState == 1" transform="translate(0,0.2)">
            <g v-if="!single">
              <line x1="-14" y1="40" x2="-8" y2="48" stroke="#ff5b41" stroke-width="2" ></line>
              <line x1="-14" y1="40" x2="-8" y2="32" stroke="#ff5b41" stroke-width="2"></line>
            </g>

            <line x1="-16" y1="40" x2="0" y2="40" stroke="#ff5b41" stroke-width="2"></line>
            <g transform="translate(-5, 0)">
              <line x1="-14" y1="40" x2="-8" y2="48" stroke="#ff5b41" stroke-width="2" ></line>
              <line x1="-14" y1="40" x2="-8" y2="32" stroke="#ff5b41" stroke-width="2"></line>
            </g>

          </g>
          <g  v-if="shouCheState == 0">
            <g v-if="!single">
              <line x1="-14" y1="40" x2="-8" y2="48" stroke="#93f958" stroke-width="2" ></line>
              <line x1="-14" y1="40" x2="-8" y2="32" stroke="#93f958" stroke-width="2"></line>
            </g>

            <line x1="-16" y1="40" x2="0" y2="40" stroke="#93f958" stroke-width="2"></line>
           <g transform="translate(-5, 0)">
             <line x1="-14" y1="40" x2="-8" y2="48" stroke="#93f958" stroke-width="2" ></line>
             <line x1="-14" y1="40" x2="-8" y2="32" stroke="#93f958" stroke-width="2"></line>
           </g>

          </g>
          <g v-if="shouCheState == 1&&!half" transform="translate(0,0.2)">
            <g  v-if="!single">
              <line x1="40" y1="40" x2="34" y2="32" stroke="#ff5b41" stroke-width="2"></line>
              <line x1="40" y1="40" x2="34" y2="48" stroke="#ff5b41" stroke-width="2"></line>
            </g>
            <line x1="42" y1="40" x2="26" y2="40" stroke="#ff5b41" stroke-width="2"></line>
            <g transform="translate(5, 0)">
              <line x1="40" y1="40" x2="34" y2="32" stroke="#ff5b41" stroke-width="2"></line>
              <line x1="40" y1="40" x2="34" y2="48" stroke="#ff5b41" stroke-width="2"></line>
            </g>
           </g>
           <g v-if="shouCheState == 0&&!half">
             <g  v-if="!single">
               <line x1="40" y1="40" x2="34" y2="32" stroke="#93f958" stroke-width="2"></line>
               <line x1="40" y1="40" x2="34" y2="48" stroke="#93f958" stroke-width="2"></line>
             </g>
             <line x1="42" y1="40" x2="26" y2="40" stroke="#93f958" stroke-width="2"></line>
            <g transform="translate(5, 0)">
              <line x1="40" y1="40" x2="34" y2="32" stroke="#93f958" stroke-width="2"></line>
              <line x1="40" y1="40" x2="34" y2="48" stroke="#93f958" stroke-width="2"></line>
            </g>
           </g>



          </g>

        </template>
      </g>
    </g>
    <g :transform="'translate(' + translateX + ',' + translateY + ')'" class="cursor-pointer" v-if="!!name">
      <text :x="titleX" :y="titleY" fill="#a9765e" font-size="16">{{name}}</text>
    </g>
  </svg>
</template>
<script>
import {submitOperateRecord} from "@/api/api";

export default {
  components: {},
  props: {
    dlqDataObj: {
      type: Object
    },
    shouCheDataObj: {
      type: Object
    },
    noDlq:{
      type: Boolean,
      default: false
    },
    single:{
      type: Boolean,
      default: false
    },
    half:{
      type: Boolean,
      default: false
    },
    name: {
      type: String
    },
    translateX: { // x轴偏移，默认0
      type: Number,
      default: 0
    },
    translateY: { // y轴偏移，默认0
      type: Number,
      default: 0
    },
    rotate: {  // z轴旋转角度,注意不是原地旋转，需要根据x、y轴偏移来调整
      type: Number,
      default: 0
    },
    titleColor: {
      type: String,
      default: '#FFFFFF'
    },
    titleWidth: {
      type: Number,
      default: 50
    },
    titleX: {
      type: Number,
      default: -4
    },
    titleY: {
      type: Number,
      default: 27
    }
  },
  data(){
    return {
      shouCheState: 0,
        isMainPage:this.$store.state.isMainPage
    }
  },
  computed: {
    color() {
      return +this.shouCheState === 1 ? '#FF0000' : '#87D66E';
    }
  },
  watch: {
    shouCheDataObj: {
      handler(newValue) {
        if (newValue) {

          this.shouCheState = newValue.state_val;
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    checkState(){
      this.desc=this.$store.state.operDescData.find(item=>item.type==='jc'&&item.comType==='开关').desc;
      this.desc=this.desc.replace('jgName',this.info.jg_name).replace('devName',this.info.state_desc).replace('state', (Number(this.state) === 0 ? "分" : "合"))
      submitOperateRecord( {log_desc:this.desc})
    },

  }
}
</script>
<style lang="less" scoped>
.cursor-pointer {
  cursor: pointer;
}
</style>
